{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'assets/jqcloud/jqcloud.css' %}">
    <style>
        .panel-small{border: 1px solid #DDDDDD;box-shadow: none!important;}
        .panel-small .panel-heading{border-bottom: 1px solid #DDDDDD!important; padding: 15px 30px!important;}
        .panel-small .panel-heading .panel-title{font-size: 14px}
    </style>
{% endblock %}
{% block title %}
    资产管理
{% endblock %}
{% block page-title %}
    资产大盘
{% endblock %}
{% block page-content %}
    <div class="row">
        <div class="col-lg-12">
            <ul class="nav nav-tabs">
                {% if perms.cmdb.view_host or perms.cmdb.view_database %}
                <li class="active">
                    <a href="{% url 'cmdb:overview' %}"  aria-expanded="true">
                        <span class="visible-xs"><i class="fa fa-home"></i></span>
                        <span class="hidden-xs">总览</span>
                    </a>
                </li>
                {% endif %}
                {% if perms.cmdb.view_host %}
                <li class="">
                    <a href="{% url 'cmdb:hosts' %}" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-user"></i></span>
                        <span class="hidden-xs">主机</span>
                    </a>
                </li>
                {% endif %}
                {% if perms.cmdb.view_database %}
                <li class="">
                    <a href="{% url 'cmdb:db' %}" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
                        <span class="hidden-xs">数据库</span>
                    </a>
                </li>
                {% endif %}
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="overview">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">保有资产分析</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">多云资产分布</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="cloud_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading" style="">
                                                    <h3 class="panel-title">不同类型资产占比</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="each_type_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">不同维度资产分析</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">各业务线资产占比</h3>
                                                </div>
                                                <div class="panel-body">
                                                     <div id="business_line_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading" style="">
                                                    <h3 class="panel-title">标签云</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="tag_cloud" style="width: 100%; height: 240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane " id="profile">
                </div>
                <div class="tab-pane" id="messages">
                </div>
                <div class="tab-pane" id="settings">
                </div>
            </div>
        </div>
    </div> <!-- End row -->
{% endblock %}
{% block js %}
    <script src="{% static 'assets/echarts/echarts.min.js' %}"></script>
    <script src="{% static 'assets/echarts/theme/macarons.js' %}"></script>
    <script src="{% static 'assets/jqcloud/jqcloud-1.0.4.js' %}"></script>
    <script>
        //获取不同云的主机数量
        var data = {{ overview.clouds_asset_count|safe }};
        // var data = [{"name": "阿里云", "value": 40}, {"name": "腾讯云", "value": 26}];
        var legend_data = [];
        var host_nums = 0;
        for(var i=0;i<data.length;i++){
            legend_data.push(data[i]['name']);
            host_nums += data[i]['value']
        }
        var cloudAssetsChart = echarts.init(document.getElementById('cloud_assets'), 'macarons');
        var cloudAssetsOption = {
            title:{
                text: host_nums,
                textStyle:{
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '资产总量',
                subtextStyle:{
                    color: 'black',
                    fontSize: 16,
                },
                top: '40%',
                left:'20%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode:false,
                top: 'middle',
                left: '50%',
                itemGap: 20,

                formatter: function (name) {
                    let target;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    return name + "   " + target
                }

            },
            series: [
                {
                    name: '云类型',
                    type: 'pie',
                    center: ['25%', '50%'],
                    radius: ['75%', '80%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        cloudAssetsChart.setOption(cloudAssetsOption);
    </script>
    <script>
        //获取不同类型的主机数量
        var data = {{ overview.each_type_assets_count|safe }};
        //var data = [{'name': '服务器', 'value': 54}, {'name': 'RDS', 'value': 5}, {'name': 'NAS', 'value': 7}]
        var legend_data = [];
        var asset_count = 0;
        for(var i=0;i<data.length;i++){
            legend_data.push(data[i]['name']);
            asset_count += data[i]['value']
        }
        var cloudAssetsChart = echarts.init(document.getElementById('each_type_assets'), 'macarons');
        var cloudAssetsOption = {
            title:{
                text: asset_count,
                textStyle:{
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '资产总量',
                subtextStyle:{
                    color: 'black',
                    fontSize: 16,
                },
                top: '40%',
                left:'20%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode:false,
                top: 'middle',
                left: '50%',
                itemGap: 20,
                /*
                formatter: function (name) {
                    let target;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    return name + "   " + target
                }
                */
            },
            series: [
                {
                    name: '资产类型',
                    type: 'pie',
                    center: ['25%', '50%'],
                    radius: ['75%', '80%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        cloudAssetsChart.setOption(cloudAssetsOption);
    </script>
    <script>
        //获取各个业务线的主机数量
        var data = {{ overview.business_line_host_nums|safe }}
        //var data = [{'name': '未分配', 'value': 41}, {'name': '商城', 'value': 3}, {'name': '资讯', 'value': 2}, {'name': '客户服务', 'value': 8}];
        var legend_data = [];
        var host_nums = 0;
        for(var i=0;i<data.length;i++){
            legend_data.push(data[i]['name']);
            host_nums += data[i]['value']
        }
        var businessLineAssetsChart = echarts.init(document.getElementById('business_line_assets'), 'macarons');
        var businessLineAssetsOption = {
            title:{
                text: '    '+ host_nums,
                textStyle:{
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '资产总量',
                subtextStyle:{
                    color: 'black',
                    fontSize: 16,
                },
                top: '40%',
                left:'20%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode:false,
                top: 'middle',
                left: '50%',
                itemGap: 20,
                formatter: function (name) {
                    let target;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    return name + "   " + target
                }
            },
            series: [
                {
                    name: '业务线',
                    type: 'pie',
                    center: ['25%', '50%'],
                    radius: ['75%', '80%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        businessLineAssetsChart.setOption(businessLineAssetsOption);
    </script>
    <script>
        //标签云
        var word_list = {{ overview.tag_cloud|safe }};
        //var word_list = [{'text': '数据库', 'weight': 2, 'link': '/assets/hosts/?tag=db'}, {'text': 'WEB服务器', 'weight': 10, 'link': '/assets/hosts/?tag=web'}, {'text': '代理服务器', 'weight': 2, 'link': '/assets/hosts/?tag=proxy'}, {'text': '运维', 'weight': 2, 'link': '/assets/hosts/?tag=devops'}, {'text': '大数据', 'weight': 0, 'link': '/assets/hosts/?tag=spark'}, {'text': '公共', 'weight': 1, 'link': '/assets/hosts/?tag=public'}, {'text': '静态资源', 'weight': 1, 'link': '/assets/hosts/?tag=static'}, {'text': '商城', 'weight': 2, 'link': '/assets/hosts/?tag=mall'}, {'text': '测试环境', 'weight': 7, 'link': '/assets/hosts/?tag=test'}, {'text': 'ERP', 'weight': 14, 'link': '/assets/hosts/?tag=ERP'}, {'text': '财务', 'weight': 3, 'link': '/assets/hosts/?tag=caiwu'}, {'text': 'OMS', 'weight': 7, 'link': '/assets/hosts/?tag=OMS'}];
        $("#tag_cloud").jQCloud(word_list);
    </script>
    <script>
        $('.cmdb').addClass('active');
        $('.cmdb .assets').addClass('active');
    </script>
{% endblock %}
